<!--
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../../components/polymer/polymer.html">

<polymer-element name="say-hello" attributes="name" on-click="{{sayHi}}">
  <template>Hello {{name}}! (click me)</template>
  <script>
    Polymer('say-hello', {
      sayHi: function() {
        this.fire('said-hello', {name: this.name});
      }
    });
  </script>
</polymer-element>
    
<polymer-element name="my-app-demo" on-said-hello="{{third}}">
  <template>
    <style>
      :host {
        display: inline-block;
        padding: 10px;
        border: 1px dotted black;
        border-radius: 3px;
        cursor: pointer;
      }
    </style>
    <div on-said-hello="{{second}}">
      <say-hello name="Eric" on-said-hello="{{first}}"></say-hello>
    </div>
  </template>
  <script>
    (function() {
      function logger(prefix, detail, sender) {
        alert(prefix + ' Said hi to ' + detail.name +' from ' + sender.localName);
      }

      Polymer('my-app-demo', {
        first: function(e, detail, sender) {
          logger('first():', detail, sender);
        },
        second: function(e, detail, sender) { 
          logger('second():', detail, sender);
        },
        third: function(e, detail, sender) {
          logger('third():', detail, sender);
        }
      });
    })();
  </script>
</polymer-element>
